<template>
  <div class="app-container" v-loading="loading">
    <!--  基本信息  -->
    <el-descriptions title="基本信息" :column="2" border>
      <el-descriptions-item label="订单编号" label-class-name="d-label" content-class-name="d-content">{{form.orderNo}}</el-descriptions-item>
      <el-descriptions-item label="下单时间" label-class-name="d-label" content-class-name="d-content">{{form.createTime}}</el-descriptions-item>
      <el-descriptions-item label="订单总额" label-class-name="d-label" content-class-name="d-content">{{form.orderInfo.totalAmount}}</el-descriptions-item>
      <el-descriptions-item label="实付金额" label-class-name="d-label" content-class-name="d-content">{{form.orderInfo.payAmount}}</el-descriptions-item>
      <el-descriptions-item label="状态" label-class-name="d-label" content-class-name="d-content">
        <el-tag size="small">{{form.statusName}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="付款时间" label-class-name="d-label" content-class-name="d-content">{{form.orderInfo.payTime}}</el-descriptions-item>
      <el-descriptions-item :span="2" label="真实姓名" label-class-name="d-label" content-class-name="d-content">{{form.realName}}</el-descriptions-item>
      <el-descriptions-item :span="2" label="备注" label-class-name="d-label" content-class-name="d-content">{{form.remark}}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>

    <!--  商品信息  -->
    <el-descriptions title="商品信息" :column="2" border></el-descriptions>
    <div v-for="item in form.orderDetail">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="商品编号" label-class-name="d-label" content-class-name="d-content">{{item.goodsNumber}}</el-descriptions-item>
        <el-descriptions-item label="商品名称" label-class-name="d-label" content-class-name="d-content">{{item.goodsName}}</el-descriptions-item>
        <el-descriptions-item label="价格" label-class-name="d-label" content-class-name="d-content">{{item.price}}</el-descriptions-item>
        <el-descriptions-item label="数量" label-class-name="d-label" content-class-name="d-content">{{item.num}}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
    </div>

    <!--  收货信息  -->
    <el-descriptions title="收货信息" :column="2" border>
      <el-descriptions-item label="联系人" label-class-name="d-label" content-class-name="d-content">{{form.contactPerson}}</el-descriptions-item>
      <el-descriptions-item label="联系电话" label-class-name="d-label" content-class-name="d-content">{{form.contactMobile}}</el-descriptions-item>
      <el-descriptions-item label="收货地址" label-class-name="d-label">{{form.address}}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>

    <!--  退款信息  -->
    <div v-if="form.refundStatus != null">
      <el-descriptions title="退款信息" :column="2" border>
        <template slot="extra">
          <el-button type="text" size="small" style="margin-right: 20px;" @click="refundDetail">查看详情</el-button>
        </template>
      </el-descriptions>
      <div v-for="item in form.orderDetail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="退款金额" label-class-name="d-label" content-class-name="d-content">{{item.price}}</el-descriptions-item>
          <el-descriptions-item label="退款状态" label-class-name="d-label" content-class-name="d-content">
            <el-tag size="small">{{refundStatusFormat(item)}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="退款原因" label-class-name="d-label" span="2">{{item.refundCause}}</el-descriptions-item>
          <el-descriptions-item label="拒绝原因" label-class-name="d-label" span="2">{{item.refundAudit || '无'}}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
      </div>
    </div>



    <!--  物流信息  -->
    <div v-if="form.status != '0' || form.status != '2' ">
      <el-descriptions title="物流信息" :column="2">
        <el-descriptions-item label="物流公司" label-class-name="d-label d-flex-align" content-class-name="d-content">
          <el-input v-model="form.expressCompany" placeholder="请输入物流公司" size="mini" @input="onInput" :disabled="form.status != '1'"/>
        </el-descriptions-item>
        <el-descriptions-item label="物流单号" label-class-name="d-label d-flex-align" content-class-name="d-content">
          <el-input v-model="form.expressNo" placeholder="请输入物流单号" size="mini" @input="onInput" :disabled="form.status != '1'"/>
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="form.status == '1' && form.refundStatus != '1'">
        <el-button type="primary" size="small" @click="submitForm" :disabled="disabled">提交</el-button>
      </div>
      <el-divider></el-divider>
    </div>

  </div>
</template>

<script>

import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder,sendOrder } from "@/api/mall/order";

export default {
  data() {
    return {
      appendToBody: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: false,
      // 总条数
      total: 0,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 提交控制
      disabled: true,
      // 表单参数
      form: {
        id: undefined,
        payOrderId: undefined,
        orderNo: undefined,
        status: "0",
        delFlag: undefined,
        createTime: undefined,
        updateTime: undefined,
        wxClientId: undefined,
        wxUserId: undefined,
        remark: undefined,
        num: undefined,
        contactPerson: undefined,
        contactMobile: undefined,
        address: undefined,
        expressCompany: undefined,
        expressNo: undefined,
        orderInfo: {},
        orderDetail: []
      },
      // 表单校验
      rules: {
      },
      refundStatusOptions: [{
        dictValue: "0",
        dictLabel: "取消"
      },{
        dictValue: "1",
        dictLabel: "申请中"
      },{
        dictValue: "2",
        dictLabel: "退款失败"
      },{
        dictValue: "3",
        dictLabel: "退款成功"
      }],
      routerOptions: [],
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_router").then(response => {
      this.routerOptions = response.data;
    });
  },
  methods: {
    getList() {
      this.loading = true;

      this.form.id = this.$route.query.id;
      if (this.form.id != "" && this.form.id != undefined && this.form.id != null) {
        getOrder(this.form.id).then(res => {
          this.form = res.data;
          this.onInput();
        })
      }
      this.loading = false;
    },
    // 状态字典翻译
    refundStatusFormat(row, column) {
      return this.selectDictLabel(this.refundStatusOptions, row.refundStatus);
    },
    // 页面路由字典翻译
    routerFormat(row, column) {
      return this.selectDictLabel(this.routerOptions, row);
    },
    resetForm() {
      this.$refs['form'].resetFields();
      this.form.status = '1';
    },

    /** 提交按钮 */
    submitForm: function () {
      let params = {
        id: this.form.id,
        expressNo: this.form.expressNo,
        expressCompany: this.form.expressCompany
      }
      sendOrder(params).then(response => {
        this.msgSuccess("保存成功");
        this.$store.dispatch("tagsView/delView", this.$route);
        var location = this.routerFormat("GoodsOrder");
        // var location = '/mall/order/goodsOrder';
        this.$router.push({'path': location, name: 'GoodsOrder', 'query': {}})
      })
    },
    onInput(){
      if (this.form.expressNo && this.form.expressCompany) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    refundDetail() {
      const id = this.form.orderDetail[0].id
      var location = this.routerFormat("RefundInfo");
      console.log(location);

      // var location = '/mall/order/refundInfo';
      this.$router.push({'path':location, 'query': {id:id}})
    }
  }

}
</script>

<style scoped>

</style>
